<template>
    <div>
        <van-button round type="success" @click="handleAdd">新增按钮</van-button>
        <dl v-for="item in list" :key="item.id">
            <dt>
                <!-- <img :src="item.img" alt="" width="150" height="150"> -->
                <van-image width="150" height="150" lazy-load :src="item.img" />
            </dt>
            <dd>
                <h4>{{ item.title }}</h4>
                <van-button type="danger" @click="handleDelete(item.id)">删除</van-button>
            </dd>
        </dl>
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const list = ref([])

// 删除
const handleDelete = async id => {
    await axios.delete('/api/list/' + id)
    getData()
}

// 跳转新增页面
const handleAdd = () => {
    router.push({
        path: '/add'
    })
}

const getData = async () => {
    const res = await axios.get('/api/list')
    list.value = res.data
}

getData()
</script>

<style scoped>
dl {
    display: flex;
}
</style>